<template>
    <!-- 蒙层加载页 -->
    <view
        class="coveringLayer"
        v-if="show"
        :style="{'color': customColor || varCss.globalColor,'--subcolor':glogbalSecordColor}"
    >
        <view class="shaft-load2">
            <view class="shaft1"></view>
            <view class="shaft2"></view>
            <view class="shaft3"></view>
            <view class="shaft4"></view>
            <view class="shaft5"></view>
            <view class="shaft6"></view>
            <view class="shaft7"></view>
            <view class="shaft8"></view>
            <view class="shaft9"></view>
            <view class="shaft10"></view>
        </view>
        <text class="tips">正在拼命地加载数据...</text>
    </view>
</template>

<script>
import {config} from "@/config.js";

export default {
    name: "coveringLayer",
    props: {
        show: {
            type: Boolean,
            default: true,
        },
        customColor: {
            type: String,
            default: 'orange'
        }
    },
    data() {
        return {};
    },
    watch: {},
    mounted() {
    },
    methods: {},
};
</script>

<style lang="scss">
.tips {
    color: orange;
    margin-top: 60 rpx;
}

.coveringLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: rgba(0, 0, 0, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.shaft-load2 {
    display: flex;
    justify-content: center;
    height: 40 rpx;
    width: 200 rpx;
}

.shaft-load2 view {
    background: #893878;
    height: 100%;
    width: 5px;
    margin-right: 1px;
    display: inline-block;
}

.shaft-load2 .shaft1 {
    -webkit-animation-delay: 0.05s;
    -moz-animation-delay: 0.05s;
    -o-animation-delay: 0.05s;
    animation-delay: 0.05s;
}

.shaft-load2 .shaft2 {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.shaft-load2 .shaft3 {
    -webkit-animation-delay: 0.15s;
    -moz-animation-delay: 0.15s;
    -o-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.shaft-load2 .shaft4 {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.shaft-load2 .shaft5 {
    -webkit-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    -o-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.shaft-load2 .shaft6 {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.shaft-load2 .shaft7 {
    -webkit-animation-delay: 0.35s;
    -moz-animation-delay: 0.35s;
    -o-animation-delay: 0.35s;
    animation-delay: 0.35s;
}

.shaft-load2 .shaft8 {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.shaft-load2 .shaft9 {
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    animation-delay: 0.45s;
}

.shaft-load2 .shaft10 {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.shaft-load2 view {
    background: var(--color);
    -webkit-animation: loading2 1.5s infinite ease-in-out;
    -moz-animation: loading2 1.5s infinite ease-in-out;
    -o-animation: loading2 1.5s infinite ease-in-out;
    animation: loading2 1.5s infinite ease-in-out;
    -webkit-transform: scaleY(0.05) translateX(-5px);
    -moz-transform: scaleY(0.05) translateX(-5px);
    -ms-transform: scaleY(0.05) translateX(-5px);
    -o-transform: scaleY(0.05) translateX(-5px);
    transform: scaleY(0.05) translateX(-5px);
}

@keyframes loading2 {
    10% {
    }
    15% {
        -webkit-transform: scaleY(1.2) translateX(10px);
        -moz-transform: scaleY(1.2) translateX(10px);
        -ms-transform: scaleY(1.2) translateX(10px);
        -o-transform: scaleY(1.2) translateX(10px);
        transform: scaleY(1.2) translateX(10px);
    }
    90%,
    100% {
        -webkit-transform: scaleY(0.05) translateX(-5px);
        -moz-transform: scaleY(0.05) translateX(-5px);
        -ms-transform: scaleY(0.05) translateX(-5px);
        -o-transform: scaleY(0.05) translateX(-5px);
        transform: scaleY(0.05) translateX(-5px);
    }
}
</style>
